<template>
  <div class="container" :style="{'overflow': shareBannerShow ? 'hidden':'auto'}">
    <nav-bar title="详情" />
    <div class="product">
      <div class="main-img">
        <van-swipe :autoplay="3000" indicator-color="#d50721">
          <van-swipe-item 
            v-for="(image, index) in productData.Product.ImagePath" 
            :key="index"
          >
            <!-- <img @load="imgLoaded" v-lazy="image" class="detail-img" /> -->
            <img @load="imgLoaded" :src="image" class="detail-img" />
          </van-swipe-item>
          <van-swipe-item v-if="productData.Product.VideoPath">
            <video width="100%" height="100%" controls="" autoplay="autoplay" poster="http://shop.jdpin.com.cn//Storage/Shop/1/Products/1360/5_500.png">
              <source :src="productData.Product.VideoPath" type="video/mp4"/>
            </video>
          </van-swipe-item>
        </van-swipe>
        <div class="group-amout" v-if="isPinData">{{productPinData.FightGroupData.LimitedNumber}}人团</div>
        <div class="group-amout" v-if="productData.LadderPrices.length">多件多折</div>
        <!-- <img :src='productData.Product.ImagePath[0]' class="detail-img" /> -->
        <div class="icon-links">
          <div class="item" @click="collect">
            <img v-if="productData.Product.IsFavorite" src='../../assets/img/icon-collect-on.png' />
            <img v-else src='../../assets/img/icon-collect.png' />
            <p>收藏</p>
          </div>
          <div class="item" @click="share">
            <img src='../../assets/img/icon-share.png' />
            <p>分享</p>
          </div>
          <div class="item" :class="{'cart-on': cartHasData}" @click="goToCart">
            <img src='../../assets/img/icon-cart.png' />
            <p>购物车</p>
          </div>
          <!-- <div class="item">
            <img src='../../assets/img/icon-service.png' />
            <p>客服</p>
          </div> -->
        </div>
      </div>
      <!-- 限时秒杀 -->
      <div class="limit-buy" v-if="productData.IsOnLimitBuy">
        <i v-if="limitRealTime.days!=='00'">{{limitRealTime.days}}</i>
        <span v-if="limitRealTime.days!=='00'">天</span>
        <i>{{limitRealTime.hours}}</i>
        <span>时</span>
        <i>{{limitRealTime.mins}}</i>
        <span>分</span>
        <i>{{limitRealTime.secs}}</i>
        <span>秒</span>
        <div class="lmt-btn" @click="chooseAreaShow('buy')">立即抢购</div>
      </div>
      <!-- 拼团 -->
      <div class="group-buy" v-if="isPinData">
        <div class="g-btn g-btn-1" @click="chooseAreaShow('buy')">
          <p>¥ {{productData.Product.MinSalePrice}}</p>
          原价买
        </div>
        <div class="g-btn g-btn-2" @click="chooseAreaShow('group')">
          <p>¥ {{productPinData.FightGroupData.MiniGroupPrice}}</p>
          去拼团
        </div>
      </div>
      <div class="group-buy-time" v-if="isPinData">
        <div class="limit-time">成团时限: {{productPinData.FightGroupData.LimitedHour}}小时</div>
        <div class="end-date">活动截止: {{productPinData.FightGroupData.EndTime}}</div>
      </div>
      
      <!-- 商品具体参数 -->
      <div class="maintain">
        <div class="name">{{productData.Product.ProductName}}</div>
        <div class="tips" v-if="productData.Product.ShortDescription">{{productData.Product.ShortDescription}}</div>
        
        <div class="price" v-if="isPinData">
          <h4><i>拼团价</i><span>¥</span>{{productPinData.FightGroupData.MiniGroupPrice}}</h4>
          <h5>¥{{productData.Product.MarketPrice}}</h5>
          <!-- <em>预计可收益¥0</em> -->
        </div>

        <div class="price" v-else>
          <h4><span>¥</span>{{productData.Product.MinSalePrice}}</h4>
          <h5 v-if="productData.Product.MinSalePrice!==productData.Product.MarketPrice">¥{{productData.Product.MarketPrice}}</h5>
          <em v-if="isBelongMan">预计可收益¥{{productData.Product.Brokerage}}</em>
        </div>

      </div>

      <div class="active">
        <div class="list">
          <div class="item">
            <em>积分</em>
            <p>购买可得{{productData.Product.GetIntegral}}积分</p>
          </div>
          <div class="item item-ticket" @click="showCouponList" v-if="shopCoupon.length">
            <em>优惠券</em>
            <p>
              <!-- <i v-for="(itemCoupon, index) in productData.Shop.CouponInfo" :key="index">{{itemCoupon.Name}}</i> -->
              <i v-for="(itemCoupon, index) in shopCoupon" :key="index">{{itemCoupon.Name}}</i>
            </p>
          </div>
          
          <div class="item item-ladder" v-if="productData.LadderPrices.length">
            <em>多件多折</em>
            <p 
              v-for="(item, index) in productData.LadderPrices" 
              :key="index"
            >
              <i v-if="index > 1">，</i>
              <i v-if="index > 0">{{item.MinBath}}件 ¥{{item.Price}}</i>
            </p>
          </div>
        </div>
      </div>
      
      <div class="ensure">
        <h3>保障</h3>
        <div class="list">
          <em>官方品质</em>
          <em>7天无忧退换货</em>
        </div>
      </div>
      <div class="labels" v-if="selectStr">
        <div class="item" @click="chooseAreaShow('txt')">
          <h3>选择</h3>
          <div class="sections">
            <p>选择 {{selectStr}}分类</p>
            <div class="list" v-if="productData.Color.length">
              <img 
                v-for="(item, index) in productData.Color" 
                :key="index" 
                :src='item.Img' 
              />
              <div class="more">{{selectMainStr}}</div>
            </div>
          </div>
        </div>
        <!-- <div class="item">
          <h3>参数</h3>
          <div class="sections">
            <p>品牌 货号...</p>
          </div>
        </div> -->
      </div>
      <div class="detail">
        <div class="comment">
          <div class="title" @click="goToComments">
            <div class="comment-all">{{productData.Product.CommentCount}}条评价</div>
            <div class="more">查看全部</div>
          </div>
          <div class="list">
            <!-- <div class="item" v-for="(item, index) in comments" :key="index">
              <h4>{{item.UserName}}:</h4>
              <p>{{item.ReviewContent}}</p>
            </div> -->
            <div class="item" v-if="comments.length">
              <img v-if="comments[0].UserPhoto==='' || comments[0].UserPhoto===null" class="person" src='../../assets/img/person.png' />
              <img v-else class="person" :src='comments[0].UserPhoto' />
              <h4>{{comments[0].UserName}}:</h4>
              <p>{{comments[0].ReviewContent}}</p>
            </div>
          </div>
        </div>
        <div class="discrib">
          <div class="title">商品详情</div>
          <div 
            v-if="mainImgLoaded"
            class="discription pro-discription" 
            v-html="productData.Product.ProductDescription"
          ></div>
        </div>
      </div>
    </div>

    <div class="btn-cart" v-if="!productData.IsOnLimitBuy">
      <div class="btn-in" @click="chooseAreaShow('cart')">加入购物车</div>
      <div class="btn-buy" @click="chooseAreaShow('buy')">立刻购买</div>
    </div>

    <van-popup 
      class="choose-area"
      position="bottom" 
      v-model="chooseShow"
      closeable
    >
      <div class="info">
        <div class="price" v-if="productSkuStock">¥<i>{{productSkuPrice}}</i></div>
        <div class="store" v-if="productSkuStock">库存 {{productSkuStock}} 件</div>
        <div class="store store-empty" v-if="productSkuStock===0">库存不足</div>
        <div class="checked-info" v-if="selectStr">
          <!-- 已选:"XL" "蓝色" -->
          {{selectedTips}}
        </div>
      </div>
      <!-- 选择尺码 -->
      <div class="size" v-if="productData.Size.length">
        <h3>{{productData.SizeAlias}}</h3>
        <div class="list">
          <div
            class="item"
            :class="{'item-on': item.isChecked}"
            v-for="(item, index) in productData.Size" 
            :key="index"
            @click="checkSize(index)"
          >
            {{item.Value}}
          </div>
        </div>
      </div>
      <!-- 选择颜色 -->
      <div class="size color" v-if="productData.Color.length">
        <h3>{{productData.ColorAlias}}</h3>
        <div class="list">
          <div 
            class="item"
            :class="{'item-on': item.isChecked}"
            v-for="(item, index) in productData.Color" 
            :key="index"
            @click="checkColor(index)"
          >
            <img :src="item.Img" />
            <p>{{item.Value}}</p>
          </div>
        </div>
      </div>
      <div class="amount">
        <div class="label">购买数量</div>
        <div class="num-area">
          <div class="reduce" @click="reduce"></div>
          <div class="num">{{counts}}</div>
          <div class="plus" @click="plus"></div>
        </div>
      </div>
      <div class="btn-cart" v-if="chooseShowType === 'txt'">
        <div class="btn-in" v-if="!isPinData" @click="addToCart">加入购物车</div>
        <div class="btn-buy" v-if="!isPinData" @click="buy">立刻购买</div>

        <div class="btn-buy btn-group btn-full" v-if="isPinData" @click="buy">拼团购买</div>
      </div>
      <div class="btn-cart" v-else>
        <div class="btn-full" v-if="chooseShowType === 'cart'" @click="addToCart">确定</div>
        <div class="btn-full" v-if="chooseShowType === 'buy' || chooseShowType === 'group'" @click="buy">确定</div>
      </div>
    </van-popup>
    <!-- 分享展示层 -->
    <div class="share-banner" v-show="shareBannerShow">
      <div class="banner" id="shareDom">
        <img class="imglogo" src='../../assets/img/logo-txt.png' />
        <img class="imgpro" :src="productData.Product.ImagePath[0]" />
        <div class="pro-name">{{productData.Product.ProductName}}</div>
        <div class="pro-tips">{{productData.Product.ShortDescription}}</div>
        <div class="qrcode-dis">
          <div class="qrcode" id="qrcode"></div>
          <div class="dis">长按了解更多 TITIKA 产品详情</div>
        </div>
      </div>
      <div id="shareRet">
        <van-loading 
          v-if="!shareImg" 
          class="share-loading" 
          size="24px" 
          vertical
        >
          海报生成中...
        </van-loading>
        <img v-if="shareImg" :src='shareImg' />
      </div>
      <div class="share-btns">
        <div class="item item-1" @touchstart.prevent="press">
          <div class="img"></div>
          <!-- <img src="../../assets/img/icon-hb.png" /> -->
          <h3>长按上图保存</h3>
        </div>
        <div class="item item-2" id="copyBtn">
          <div class="img"></div>
          <!-- <img src="../../assets/img/icon-link.png" /> -->
          <h3>复制链接</h3>
        </div>
      </div>
      <div class="close" @click="closeShare">&times;</div>
    </div>

    <van-popup 
      v-model="couponShow"
      position="bottom" 
      closeable
    >
      <div class="coupon-tit">店铺优惠券</div>
      <div class="coupon-list">
        <div class="no-coupon" v-if="shopCoupon.length === 0">暂无优惠券</div>
        <div class="item" v-for="(item, index) in shopCoupon" :key="index">
          <div class="left">
            <h3>¥<em>{{item.Price}}</em> 店铺优惠券</h3>
            <div class="dis">
              <p v-if="item.OrderAmount">订单满{{item.OrderAmount}}使用</p>
              <p v-else>订单金额不限制</p>
              <p>使用期限:{{item.StartTime}}-{{item.EndTime}}</p>
            </div>
          </div>
          <div class="right" :class="{exist: item.exist}">
            <div class="btn-get" @click="userGetCoupon(item.CouponId)">立即领取</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { 
  getProduct, 
  addProductToCart, 
  getProductSkuId, 
  getProductComments,
  collectProduct,
  getPinDetail
} from '../../network/product'
import { getUserCoupon, getShopCoupon, userGetShopCoupon } from '../../network/coupon'
import { Toast } from 'vant'

import { drawHtml, copyInit, getShareUrl } from '../../utils/share'
import { sharePage } from '../../utils/wx'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      isBelongMan: JSON.parse(localStorage.getItem('isBelongMan')),
      imgLoadedNum: 0,
      mainImgLoaded: false,
      productData: {
        Size: [],
        Color: [],
        Product: {
          ProductName: '',
          MarketPrice: '',
          MinSalePrice: '',
          ShortDescription: '',
          ProductDescription: '',
          CommentCount: '',
          IsFavorite: false,
          ImagePath: [],
        },
        Shop: {
          CouponInfo: []
        },
        ColorAlias: '',
        SizeAlias: '',
        LadderPrices: [],
      },
      productSkuId: null,
      productSkuPrice: null,
      productSkuStock: null,
      productSkuInfo: [],
      isPinData: false,
      productPinData: {
        FightGroupData: {}
      },
      matchSku: [],
      matchType: [],
      matchAll: false,
      chooseShow: false,
      chooseShowType: null,
      counts: 1,
      comments: [],
      cartHasData: false,
      limitRealTime: {
        days: '00',
        hours: '00',
        mins: '00',
        secs: '00',
      },
      shareBannerShow: false,
      shareImg: '',
      timeDiff: 0,
      
      userCoupon: [],
      shopCoupon: [],
      couponShow: false,
      isPinData: false,
    }
  },
  computed: {
    selectStr(){
      let selectStr = ''
      if(this.productData){
        if(this.productData.Size.length){
          selectStr += this.productData.SizeAlias
        }
        if(this.productData.Color.length){
          selectStr += ' ' + this.productData.ColorAlias
        }
      }
      return selectStr
    },
    selectMainStr(){
      let selectStr = `共${this.productData.Color.length}种
          ${this.productData.ColorAlias}分类可选`
      return selectStr
    },
    selectedTips(){
      let str = ''
      
      // 两个规格都开起来时
      if(this.productData.Color.length && this.productData.Size.length){
        let colorChecked = this.productData.Color.some(item => {
          return item.isChecked
        })
        let sizeChecked = this.productData.Size.some(item => {
          return item.isChecked
        })
        let noneChecked = !colorChecked && !sizeChecked

        if(colorChecked && !sizeChecked){
          str = `请选择${this.productData.SizeAlias}`
        } else
        if(!colorChecked && sizeChecked){
          str = `请选择${this.productData.ColorAlias}`
        } else
        if(noneChecked){
          str = `请选择${this.productData.ColorAlias} ${this.productData.SizeAlias}`
        } else {
          this.matchAll = true
          str += '已选择'
          this.productData.Color.map(item => {
            if(item.isChecked){
              str += item.Value
            }
          })
          this.productData.Size.map(item => {
            if(item.isChecked){
              str += item.Value
            }
          })
        }
      } else

      // 只有单个规格
      if(this.productData.Color.length){
        // 颜色规格是否选中
        let colorChecked = this.productData.Color.some(item => {
          return item.isChecked
        })
        this.matchAll = colorChecked
      } else
      if(this.productData.Size.length){
        // 尺寸规格是否选中
        let sizeChecked = this.productData.Size.some(item => {
          return item.isChecked
        })
        this.matchAll = sizeChecked
      }

      // 无规格，单品
      if(!this.productData.Color.length && !this.productData.Size.length){
        this.matchAll = true
      }
      
      return str
    },
  },
  async mounted() {
    this.isPinData = !!this.$route.query.groupId

    await this.getProduct()
    await this.getProductSkuId()
    this.sharePage()
    this.getProductComments()
    this.getPinDetail()
    copyInit('product')

  },
  methods: {
    async showCouponList(){
      await this.getCoupon()

      if(this.shopCoupon.length === 0){
        return false
      }
      this.couponShow = true
    },
    getUserCoupon(cb){
      let requestData = {
        userkey: this.userKey
      }
      getUserCoupon(requestData, list => {
        this.userCoupon = list
        cb && cb(list)
      })
    },
    getShopCoupon(cb){
      let requestData = {
        shopId: this.productData.Shop.Id
      }
      getShopCoupon(requestData, list => {
        list = list.filter(item => {
          let couponIn = item.CouponName.indexOf('内部优惠券') === -1
          return couponIn
        })
        this.shopCoupon = list
        cb && cb(list)
      })
    },
    getCoupon(){
      return new Promise(resolve => {
        this.getUserCoupon(userList => {
          this.getShopCoupon(shopList => {
            // console.log(userList, shopList)
            this.shopList = shopList.map(item => {
              let result = userList.some(itemIn => {
                return item.CouponId === itemIn.CouponId
              })
              item.exist = result
              return item
            })
            resolve()
          })
        })
      })
    },
    userGetCoupon(couponId){
      let requestData = {
        userkey: this.userKey,
        vshopId: this.productData.Shop.Id,
        couponId,
      }
      userGetShopCoupon(requestData, async res => {
        Toast('领取成功')
        await this.getCoupon()
      })
    },
    press(e){},
    imgLoaded(){
      this.imgLoadedNum++
      let length = this.productData.Product.ImagePath.length
      if(this.imgLoadedNum>=length){
        this.mainImgLoaded = true
      }
    },
    async sharePage(){
      sharePage({
        title: this.productData.Product.ProductName,
        desc: '好友给你推荐了' + this.productData.Product.ProductName,
        link: await getShareUrl('product'),
        imgUrl: this.productData.Product.ImagePath[0],
      })
    },
    async share(){
      this.shareBannerShow = true
      if(this.shareImg === ''){
        
        this.shareImg = await drawHtml(this, '#shareDom', '#shareRet', 'product', {
          width: 74,
          height: 74
        })
      }
    },
    closeShare(){
      this.shareBannerShow = false
    },
    getProduct(){
      return new Promise((resolve, reject) => {
        let productId = this.$route.query.id
        getProduct(productId, productData => {
          let marketPriceFixed = productData.Product.MarketPrice.toFixed(2)
          let minSalePriceFixed = productData.Product.MinSalePrice.toFixed(2)
          this.$set(productData.Product, 'MarketPrice', marketPriceFixed)
          this.$set(productData.Product, 'MinSalePrice', minSalePriceFixed)
          this.productData = productData
          let severTime = new Date(productData.NowTime).getTime()
          this.getLimitRealTime(severTime, 'firstTime')
          if(productData.IsOnLimitBuy){
            setInterval(() => {
              this.getLimitRealTime(severTime)
            }, 1000)
          }
          resolve()
        })
      })
    },
    getLimitRealTime(severTime, type){
      let nowTime = new Date().getTime()
      if(type === 'firstTime'){
        this.timeDiff = nowTime - severTime
        console.log(this.timeDiff)
      }
      let endTime = new Date(this.productData.EndDate).getTime()
      let totalSecs = (endTime - nowTime + this.timeDiff)/1000
      let days = Math.floor(totalSecs/3600/24)
      let hours = Math.floor((totalSecs-days*24*3600)/3600)
      let mins = Math.floor((totalSecs-days*24*3600-hours*3600)/60)
      let secs = Math.floor((totalSecs-days*24*3600-hours*3600-mins*60))
      this.limitRealTime = {
        days: this.numberDouble(days),
        hours: this.numberDouble(hours),
        mins: this.numberDouble(mins),
        secs: this.numberDouble(secs),
      }
      // console.log(this.productData.EndDate, days, hours, mins, secs)
    },
    numberDouble(num){
        if(num<10){
          num='0'+num
        }
        return num
    },
    getProductSkuId(){
      return new Promise((resolve, reject) => {
        let productId = this.$route.query.id
        let requestData = {
          productId,
          colloPid: 0,
          userKey: this.userKey
        }
        getProductSkuId(requestData, skuInfo => {
          this.productSkuInfo = skuInfo
          this.productSkuOriginInfo = skuInfo // 备份未参加拼团的skuInfo
          this.matchSku = skuInfo
          this.updateDefaultSku(skuInfo)
          resolve()
        })
      })
    },
    updateDefaultSku(skuInfo){ // 默认取第一条skuInfo数据
      this.productSkuId = skuInfo[0].SkuId
      this.productSkuPrice = skuInfo[0].Price.toFixed(2)
      this.productSkuStock = skuInfo[0].Stock
    },
    getPinDetail(){
      if(this.$route.query.pinId && this.productData.IsFightGroupActive){
        this.isPinData = true
      } else {
        return false
      }
      let requestData = {
        userkey: this.userKey,
        id: this.$route.query.pinId,
        grouId: 0,
      }
      getPinDetail(requestData, data => {
        this.productPinData = data
      })
    },
    getProductComments(){
      let requestData = {
        pId: this.$route.query.id,
        pageNo: 1,
        pageSize: 10,
        commentType: 0,
        shopBranchId: 0
      }
      getProductComments(requestData, list => {
        this.comments = list
      })
    },
    updataSkuInfo(skuId, type){
      
      let typeIndex = type === 'size' ? 2 : 1
      this.$set(this.matchType, typeIndex, skuId)
      this.matchSku = this.productSkuInfo.filter(item => {
        let skuIdSplit = item.SkuId.split('_')
        // 所选类别都匹配上的sku项
        let result = this.matchType.every((itemIn, idx) => {
          if(itemIn!==undefined){
            return Number(skuIdSplit[idx]) === itemIn
          } else {
            return true
          }
        })
        return result
      })
      // 库存充足
      if(this.matchSku[0]){
        this.productSkuId = this.matchSku[0].SkuId
        this.productSkuPrice = this.matchSku[0].Price.toFixed(2)
        this.productSkuStock = this.matchSku[0].Stock
      } else
      // 库存不足
      {
        console.log('库存不足')
        this.productSkuStock = 0
      }
      
    },
    chooseAreaShow(type){
      this.chooseShow = true
      this.chooseShowType = type

      // 如果是拼团购买，skuInfo更换
      if(this.isPinData && (this.chooseShowType === 'group' || this.chooseShowType === 'txt')){
        this.productSkuInfo = this.productPinData.SkuData
        this.updateDefaultSku(this.productSkuInfo)
      } else 
      if(this.isPinData && this.chooseShowType === 'buy')
      {
        this.productSkuInfo = this.productSkuOriginInfo
        this.updateDefaultSku(this.productSkuInfo)
      }
    },
    checkSize(index){
      this.productData.Size = this.productData.Size.map((item, idx) => {
        if(index === idx){
          item.isChecked = true
          this.updataSkuInfo(item.SkuId, 'size')
        } else {
          item.isChecked = false
        }
        return item
      })
    },
    checkColor(index){
      this.productData.Color = this.productData.Color.map((item, idx) => {
        if(index === idx){
          item.isChecked = true
          this.updataSkuInfo(item.SkuId, 'color')
        } else {
          item.isChecked = false
        }
        return item
      })
    },
    addToCart(){

      if(this.productSkuStock === 0){
        return false
      }
      
      this.validateChoose(() => {
        let requestData = {
          userkey: this.userKey,
          skuId: this.productSkuId,
          count: this.counts,
        }
        addProductToCart(requestData, () => {
          Toast('已添加到购物车')
          this.chooseShow = false
          // this.$router.push('/cart')
        })
      })
    },
    buy(){
      if(this.productSkuStock === 0){
        return false
      }
      
      this.validateChoose(() => {
        let requestData = {
          userkey: this.userKey,
        }
        // 团购方式购买
        if(this.isPinData && (this.chooseShowType === 'group' || this.chooseShowType === 'txt')){
          requestData.skuId = this.productSkuId
          requestData.count = this.counts
        } else {
          requestData.skuIds = this.productSkuId
          requestData.counts = this.counts
        }
        let productList = [{
          ProductName: this.productData.Product.ProductName,
          ProductPrice: this.productSkuPrice,
          counts: this.counts,
          checked: this.selectedTips,
          imgUrl: this.productData.Product.ImagePath[0]
        }]
        localStorage.setItem('productRequestData', JSON.stringify(requestData))
        localStorage.setItem('productRequestList', JSON.stringify(productList))
        localStorage.setItem('productRequestAddress', null)
        
        let query = {
          action: 1,
          shopId: this.productData.Shop.Id,
        }
        // 团购情况下
        if(this.isPinData && (this.chooseShowType === 'group' || this.chooseShowType === 'txt')){
          query.groupId = this.productPinData.FightGroupData.Id
        }
        this.$router.push({
          path: '/orderConfirm',
          query
        })
      })
    },
    validateChoose(cb){
      // 为选择完SKU则提示
      if(!this.matchAll){
        Toast(this.selectedTips || '请选择产品规格')
      } else {
        cb && cb()
      }
    },
    reduce(){
      if(this.counts>1){
        this.counts--
      }
    },
    plus(){
      if(this.counts < this.productSkuStock){
        this.counts++
      } else {
        Toast('商品库存不足')
      }
    },
    collect(){
      let requestData = {
        userkey: this.userKey,
        productId: this.productData.Product.ProductId
      }
      collectProduct(requestData, Msg => {
        Toast(Msg)
        this.productData.Product.IsFavorite = 
        !this.productData.Product.IsFavorite
      })
    },
    goToComments(){
      this.$router.push({
        path: '/comments',
        query: {
          id: this.$route.query.id
        }
      })
    },
    goToCart(){
      this.$router.push('/cart')
    },
    
  },
}
</script>

<style scoped>
.container{
  height: 100vh;
  overflow: auto;
  background-color: #e6e5e5;
}
.product .main-img{
  width: 100%;
  padding: 100% 0 0;
  position: relative;
}
.product .main-img img.detail-img{
  width: 100%;
}
.product .icon-links{
  text-align: center;
  position: fixed;
  top: 70px;
  right: 20px;
  width: 44px;
  padding: 10px 0;
  border-radius: 40px;
  font-size: 12px;
  background-color: #ffffff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
  z-index: 999;
}
.product .icon-links .item{
  position: relative;
  padding: 6px 0;
  color: #787878;
}
.product .icon-links .item img{
  width: 18px;
}
.product .icon-links .item.cart-on:after{
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 2px;
  background-color: #d50721;
}
.maintain{
  position: relative;
  border-radius: 10px 10px 0 0;
  margin-top: -12px;
  padding: 25px;
  background-color: #ffffff;
}
.maintain .name{
  padding-bottom: 10px;
}
.maintain .tips{
  font-size: 12px;
  color: #bebebf;
  padding: 15px 0 15px 0;
}
.maintain .price{
  display: flex;
  align-items: flex-end;
  align-items: center;
  justify-content: space-between;
}
.maintain .price h4{
  font-size: 20px;
  color: #d50721;
  line-height: 1;
  margin-bottom: -2px;
}
.maintain .price h4 i{
  padding-right: 10px;
  font-size: 14px;
  opacity: .6;
}
.maintain .price h4 span{
  font-size: 14px;
  padding-right: 4px;
  line-height: 1;
}
.maintain .price h5{
  color: #757575;
  flex-grow: 1;
  padding-left: 10px;
  text-decoration: line-through;
}
.maintain .price em{
  color: #0598dd;
  font-size: 12px;
}
.product .active{
  display: flex;
  padding: 20px 25px;
  margin-top: 10px;
  line-height: 2;
  background-color: #fff;
}
.product .active h3{
  width: 45px;
}
.product .active .list{
  flex-grow: 1;
  font-size: 14px;
}
.product .active .list .item{
  display: flex;
}
.product .active .list .item em{
  flex-shrink: 0;
  width: 70px;
}
.product .active .list .item-ticket p,
.product .active .list .item-ladder p{
  color: #d50721
}
.product .active .list .item-ticket{
  position: relative;
  line-height: 1.5;
  padding-top: 5px;
}
.product .active .list .item-ticket p{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.product .active .list .item-ticket p i{
  padding-right: 15px;
}
.product .active .list .item-ticket:after{
  position: absolute;
  content: '';
  right: -6px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #757575;
  border-right: 1px solid #757575;
  transform: rotate(45deg);
}
.ensure{
  display: flex;
  padding: 20px 25px;
  margin-top: 10px;
  background-color: #ffffff;
}
.ensure h3{
  width: 45px;
}
.ensure .list{
  font-size: 14px;
}
.ensure .list em{
  padding-right: 20px;
}
.labels{
  padding: 20px 25px;
  margin-top: 10px;
  background-color: #ffffff;
}
.labels .item{
  font-size: 14px;
  display: flex;
}
.labels .item h3{
  width: 45px;
}
.labels .item .sections .list{
  display: flex;
  align-items: center;
  padding: 15px 0;
}
.labels .item .sections .list img{
  width: 25px;
  height: 25px;
  margin-right: 5px;
  border-radius: 3px;
}
.labels .item .sections .list .more{
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  color: #ababab;
  background-color: #f6f6f6;
}
.detail{
  padding: 20px 0;
  margin-top: 10px;
  background-color: #ffffff;
}
.detail .comment{
  padding: 0 25px;
}
.detail .comment .title{
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  position: relative;
  padding-right: 15px;
}
.detail .comment .title:after{
  position: absolute;
  content: '';
  right: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #757575;
  border-right: 1px solid #757575;
  transform: rotate(45deg);
}
.detail .comment .list .item{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;
  padding: 15px 0;
  line-height: 1.8;
}
.detail .comment .list .item h4{
  flex-grow: 1;
  padding-left: 6px;
}
.detail .comment .list .item .person{
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.detail .comment .list .item p{
  width: 100%;
  color: #757575;
}
.detail .discrib .title{
  font-size: 16px;
  font-weight: bold;
  padding: 20px 25px 15px 25px;
}
.detail .discription{
  padding-bottom: 60px;
}
.btn-cart{
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
}
.btn-cart .btn-in{
  width: 50%;
  line-height: 50px;
  border-radius: 50px 0 0 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
.btn-cart .btn-buy{
  width: 50%;
  line-height: 50px;
  border-radius: 0 50px 50px 0;
  color: #ffffff;
  text-align: center;
  background-color: #d50721;
}
.btn-cart .btn-full{
  width: 100%;
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
.btn-cart .btn-group{
  background-color: #d50721;
}
.choose-area{
  padding: 0 10px 70px 10px;
  box-sizing: border-box;
}
.choose-area .info{
  padding: 20px 10px 10px 10px;
  text-align: center;
}
.choose-area .info .price{
  color: #d50721;
}
.choose-area .info .price i{
  font-size: 22px;
}
.choose-area .info .store{
  color: #757575;
  font-size: 12px;
}
.choose-area .info .store-empty{
  color: #d50721;
  font-size: 16px;
  padding-bottom: 10px;
}
.choose-area .info .checked-info{
  font-size: 14px;
  line-height: 1.8;
}
.choose-area .size h3{
  line-height: 3;
  border-top: 1px solid #e4e4e4;
}
.choose-area .size .list{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.choose-area .size .list .item{
  font-size: 14px;
  padding: 2px 10px;
  background: #f0f0f0;
  margin-right: 15px;
  margin-bottom: 6px;
  border-radius: 3px;
  text-align: center;
  line-height: 2;
  border: 1px solid #f0f0f0;
}
.choose-area .size .list .item-on{
  border: 1px solid #d50721;
}
.choose-area .color .list .item img{
  width: 50px;
  height: 50px;
  margin-top: 6px;
  border-radius: 2px;
}
.choose-area .color .list .item-on{
  border: 1px solid #d50721;
}
.amount{
  display: flex;
  align-items: center;
  height: 50px;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  margin-bottom: 10px;
  justify-content: space-between;
}
.amount .num-area{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.amount .num-area .reduce,
.amount .num-area .plus{
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  background-color: #f7f7f7;
}
.amount .num-area .num{
  width: 35px;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
.amount .num-area .reduce:before,
.amount .num-area .plus:before{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4px;
  content: '';
  display: block;
  width: 9px;
  height: 1px;
  background-color: #999999;
}
.amount .num-area .plus:after{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -5px;
  content: '';
  display: block;
  width: 1px;
  height: 10px;
  background-color: #999999;
}
.share{
  width: 300px;
  height: 420px;
  border-radius: 3px;
  overflow: hidden;
}
.share .share-dom{
  width: 300px;
  height: 380px;
  background-color: #fff;
}
.share .main-img{
  width: 100%;
}
.share .discrib{
  padding: 10px;
}
.share .discrib .info{
  display: flex;
  justify-content: space-between;
}
.share .discrib .info .ewm{
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  margin-top: 5px;
  overflow: hidden;
  background-color: #e4e4e4;
}
.share .share-result{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 40px;
  background-color: #fff;
}
.share .share-result img{
  width: 100%;
}
.share .tips{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 40px;
  color: #d50721;
  background-color: #f4f4f4;
  text-align: center;
  font-size: 12px;
}
.limit-buy{
  position: fixed;
  bottom: 5px;
  left: 5px;
  right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 0 0 20px;
  color: #fff;
  background-color: #000;
  z-index: 999;
  border-radius: 6px;
  overflow: hidden;
}
.limit-buy .lmt-btn{
  line-height: 60px;
  padding: 0 20px;
  margin-left: 10px;
  font-size: 16px;
  background-color: #d50721;
}
.limit-buy i{
  padding-left: 5px;
  font-size: 16px;
}
.limit-buy span{
  opacity: .3;
  font-size: 14px;
  padding-right: 5px;
}
.group-buy{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #000;
  z-index: 999;
  border-radius: 6px;
  overflow: hidden;
}
.group-buy .g-btn{
  width: 46%;
  line-height: 1.2;
  height: 45px;
  padding-top: 5px;
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
}
.group-buy .g-btn p{
  font-size: 18px;
}
.group-buy .g-btn-2{
  color: #fff;
  background:#d50721;
}
.group-amout{
  position: absolute;
  left: 0;
  top: 10px;
  width: 80px;
  line-height: 40px;
  color: #fff;
  text-align: center;
  padding-right: 3px;
  border-radius: 0 30px 30px 0;
  background: #d50721;
}
.group-buy-time{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 10px 20px;
  color: #ffffff;
  font-size: 14px;
  background-color: #d50721;
}
.maintain .price-ladder{
  display: flex;
  align-items: center;
}
.maintain .price-ladder h4{
  width: 70px;
  line-height: 25px;
  border-radius: 25px;
  color: #fff;
  text-align: center;
  margin: 5px 10px 5px 0;
  background-color: #d50721;
}
.maintain .price-ladder .ladder{
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
}
.maintain .price-ladder .ladder p:last-child{
  padding-right: 0;
}
.maintain .price-ladder .ladder p span em,
.maintain .price-ladder .ladder p span i
{
  font-size: 12px;
  color: #d50721;
}
.maintain .price-ladder .ladder p span i{
  padding-left: 3px;
  font-size: 20px;
}
.share-banner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1000;
}
.share-banner .banner{
  position: relative;
  padding: 40px 20px 20px 20px;
  overflow: hidden;
}
.share-banner .banner .imglogo{
  display: block;
  width: 140px;
  height: 42px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.share-banner .banner .imgpro{
  width: 100%;
  background-color: #f4f4f4;
}
.share-banner .banner .pro-name{
  font-weight: bold;
  line-height: 1.4;
  padding-top: 30px;
}
.share-banner .banner .pro-tips{
  color: #999999;
  font-size: 14px;
  padding: 10px 0 0 0;
}
.share-banner .share-btns{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  z-index: 1001;
}
.share-banner .share-btns .item{
  text-align: center;
  flex-grow: 1;
}
.share-banner .share-btns .item .img{
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-bottom: 5px;
  background: url(../../assets/img/icon-hb.png);
  background-size: 100% auto;
}
.share-banner .share-btns .item-2 .img{
  background: url(../../assets/img/icon-link.png);
  background-size: 100% auto;
}
.share-banner .qrcode-dis{
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.share-banner .qrcode-dis .qrcode{
  width: 74px;
  height: 74px;
  background-color: #fff;
  box-sizing: border-box;
}
.share-banner .qrcode-dis .dis{
  color: #999;
  font-size: 14px;
  flex-grow: 1;
  text-align: center;
}
.share-banner #shareRet{
  /* display: none; */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 20;
  background-color: #fff;
}
/* .share-banner #shareRet::-webkit-scrollbar {
  width: 0;
  height: 0;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  background-color: rgba(240,240,240,0)
} */
.share-banner .share-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -40px;
}
.share-banner #shareRet img{
  width: 100%;
  vertical-align: baseline;
}
.close{
  position: absolute;
  top: 12px;
  right: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  color: #fff;
  font-size: 20px;
  z-index: 21;
  background-color: #000;
}
</style>
<style>
/* reset .van-swipe__indicators*/
.product .main-img .van-swipe__indicators{
  bottom: 20px!important;
}
.product .main-img .van-swipe{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pro-discription img{
  max-width: 100%;
}

.coupon-list{
  padding: 15px;
}
.coupon-tit{
  text-align: center;
  line-height: 50px;
  padding-top: 5px;
}
.coupon-list .item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 14px;
  color: #f86930
}
.coupon-list .item .left{
  flex-grow: 1;
  padding: 10px;
  border-radius: 8px;
  background-color: #ffe8df;
}
.coupon-list .item .left h3 em{
  font-size: 32px;
  font-weight: bold;
  padding: 0 5px;
}
.coupon-list .item .left .dis{
  font-size: 12px;
}
.coupon-list .item .right{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  border-left: 1px dashed #ffc6af;
  flex-shrink: 0;
  background-color: #ffe8df;
  border-radius: 8px;
}
.coupon-list .item .right.exist{
  background-image: url("../../assets/img/exist.png");
  background-position: right bottom;
  background-size: 50px auto;
  background-repeat: no-repeat;
}
.coupon-list .item .right .btn-get{
  color: #ffffff;
  padding: 6px 15px;
  border-radius: 80px;
  font-size: 12px;
  background-color: #f86930;
}
.no-coupon{
  line-height: 3;
  text-align: center;
  font-size: 16px;
  padding: 20px;
  color: #999;
}
</style>